<template>
  <BaseControlTemplate
    class="flex-start radio"
    :new-params="newParams"
    :page-view-mode="pageViewMode"
    :readonly="readonly"
    :model-value="modelValue"
    :validate-error="validateError"
    :save-dialog-config="saveDialogConfig"
  >
    <!-- <template v-if="pageViewMode === 'print'">
      <div class="printDiv">
        {{
          newParams.data
            .filter((item) => {
              return modelValue2.includes(item.id)
            })
            .map((ro) => ro.name)
            .join(',')
        }}
      </div>
    </template> -->
    <template>
      <el-radio
        v-for="item in newParams.data"
        :key="item.id"
        v-model="modelValue2"
        :class="{ aline: calcNameLenFn(item.name) }"
        :label="item.id"
        :disabled="pageViewMode !== 'runtime' || readonly"
        >{{ item.name }}</el-radio
      >
    </template>
  </BaseControlTemplate>
</template>

<script>
import mixins from "../../mixins/vue.js";
export default {
  name: "ControlRadio",
  mixins: [mixins],
  data() {
    return {
      newParams: {},
    };
  },
  watch: {
    pageViewMode: {
      handler: function(newValue, oldValue) {
        if (newValue === "print") {
          this.newParams.data = this.newParams.data.filter(
            (item) => this.newParams.value.indexOf(item.id) >= 0
          );
        }
      },
      deep: true,
    },
  },
  created() {
    this.newParams = JSON.parse(JSON.stringify(this.params));
    if (this.pageViewMode === "print") {
      this.newParams.data = this.newParams.data.filter(
        (item) => this.newParams.value.indexOf(item.id) >= 0
      );
    }
    this.newParams.value = this.newParams.value?.[0] || "";
  },
  methods: {
    validate() {
      if (this.pageViewMode === "runtime") {
        this.newParams.value = [this.modelValue2];
        this.validateRequired();
      }
      return {
        controlValue: this.newParams,
        validateError: this.validateError,
      };
    },
    calcNameLenFn(val) {
      const zhLen = val.match(/[\u4e00-\u9fa5]/g)?.length || 0;
      const otherLen = val.length - zhLen;
      return zhLen + otherLen / 2 > 10;
    },
  },
};
</script>
